<template>
  <div class="app-container">
    <!-- <div class="header_title_box">
      <h2>基本信息</h2>
    </div> -->
    <!-- 搜索 -->
    <div class="select_form_box">
      <div class="filter-container">
        <el-input v-model="queryParam.company_name" size="small" placeholder="客户名称" class="input-with-select mr16" @keyup.enter.native="getList()" />
        <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="getList()">
          搜索
        </el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
      </div>
    </div>
    <!-- 导出 -->
    <div class="operation_button_box">
      <el-button v-action="'DischargeCargo@save'" size="small" type="primary" icon="el-icon-circle-plus-outline" @click="handleCreate">卸柜入库费</el-button>
      <el-button v-action="'DischargeCargo@confirm'" size="small" type="primary" @click="handleConfirm">确认</el-button>
      <el-button v-action="'DischargeCargo@export'" size="small" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
    </div>
    <!-- 表格 -->
    <div v-loading="loading">
      <el-table :data="data" border fit :max-height="screenHeigh" @selection-change="handleSelectMulti">
        <el-table-column type="selection" width="51" align="center" />
        <el-table-column label="操作" width="109" align="center" fixed>
          <template slot-scope="scope">
            <span v-if="!scope.row.status" v-action="'DischargeCargo@update'" class="edit_style" style="margin: 0;" @click="handleUpdate(scope.row)">编辑</span>
            <span v-if="!scope.row.status" v-action="'DischargeCargo@delete'" class="delete_style" style="margin: 0;" @click="dels(scope.row.id)">删除</span>
          </template>
        </el-table-column>
        <el-table-column label="客户" prop="company" align="center" width="138" />
        <el-table-column label="卸货费" prop="discharge_total" align="center" width="85" />
        <el-table-column label="入库验收费" prop="check_total" align="center" width="110" />
        <el-table-column label="标准订单出库服务费" prop="outbound_service_total" align="center" width="147" />
        <el-table-column label="拒收/退货入库服务费" prop="return_total" align="center" width="158" />
        <el-table-column label="打托费" prop="pallet_total" align="center" width="66" />
        <el-table-column label="贴标签" prop="label_total" align="center" width="79" />
        <el-table-column label="应扣额度" prop="quota" align="center" width="86" />
        <el-table-column label="确认状态" align="center" width="96">
          <template slot-scope="scope">
            {{ scope.row.status ? '已确认' : '未确认' }}
          </template>
        </el-table-column>
        <el-table-column label="实际扣减额度" prop="quota" align="center" width="134">
          <template slot-scope="scope">
            {{ scope.row.status ? scope.row.quota : '' }}
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="created_by_name" align="center" width="114" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.created_by_name || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="created_at" align="center" width="163" />
        <el-table-column label="修改人" prop="updated_by_name" align="center" width="74">
          <template slot-scope="scope">
            {{ scope.row.updated_by_name || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="修改时间" prop="updated_at" align="center" width="163" />
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[50, 100, 200, 500]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!--下载字段选择-->
    <DownModul :url="exportUrl" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="导出字段选择" :options-modul="optionsModul" />
  </div>
</template>

<script>
import formOperate from '../../../layout/mixin/formOperate'
import { action } from '@/directive/permission/index.js' // 权限判断指令
import cacheList from '@/layout/mixin/cacheList'
import DownModul from '@/components/DownModul/index.vue'
export default {
  name: 'DischargeCargoFee',
  components: { DownModul },
  directives: {
    action
  },
  filters: {
    total(row) {
      return (
        row.discharge_total +
        row.check_total +
        row.outbound_service_total +
        row.return_total +
        row.pallet_total +
        row.return_total
      )
    }
  },
  mixins: [formOperate, cacheList],
  data() {
    return {
      otherHeight: 380,
      componentName: 'DischargeCargoFee',
      url: '/discharge-cargo-fee',
      queryParam: {
        company_name: '',
        page: 1,
        limit: 50
      },
      exportUrl: '/discharge-cargo-fee-export',
      cachePaths: [
        '/settlement/dischargeCargoFee/add'
      ],
      optionsModul: [
        {
          key: 'company',
          label: '客户'
        },
        {
          key: 'discharge_total',
          label: '卸货费'
        },
        {
          key: 'check_total',
          label: '入库验收费'
        },
        {
          key: 'outbound_service_total',
          label: '标准订单出库服务费'
        },
        {
          key: 'return_total',
          label: '拒收/退货入库服务费'
        },
        {
          key: 'pallet_total',
          label: '打托费'
        },
        {
          key: 'label_total',
          label: '贴标签'
        },
        {
          key: 'quota',
          label: '应扣额度'
        },
        {
          key: 'pay_amount',
          label: '实际扣减额度'
        }
      ]
    }
  },
  activated() {
    this.getList()
  },
  methods: {
    // 导出
    handleExport() {
      const vm = this
      const { company_name } = vm.queryParam
      const params = { company_name }
      // vm.handleExportxlsx(vm.exportUrl, params)
      vm.downLoadParams = params
      vm.formVisibleDown = true
    },
    // 新增
    handleCreate() {
      const vm = this
      vm.$router.push({ path: '/settlement/dischargeCargoFee/add' })
    },
    // 确定
    handleConfirm() {
      const vm = this
      if (vm.selectedIds.length <= 0) {
        vm.$message.error('请至少选择一条数据')
        return
      }
      const every = vm.data.filter(e => vm.selectedIds.includes(e.id)).every(e => e.status === 0)
      if (!every) {
        return vm.$message.error('所选数据必须是未确认状态')
      }
      vm.$confirm(`确定要确认吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        vm.$http.post('/discharge-cargo-fee/confirm', { ids: vm.selectedIds }).then(res => {
          vm.$message.success('确认成功')
          vm.getList()
        })
      })
    },
    // 编辑
    handleUpdate(row) {
      const vm = this
      vm.$router.push({ path: `/settlement/dischargeCargoFee/add/${row.id}`, query: { title: '编辑卸货入库费' } })
    },
    // 删除
    dels(id) {
      const vm = this
      vm.$confirm(`确定${id ? '' : '批量'}删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        vm.$http.delete(`/discharge-cargo-fee/${id}`).then(() => {
          vm.$message.success('删除成功')
          vm.getList()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
